<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html{
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			body{
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			.main-container{
				width: 100%;
				height: 100%;
				background-color:#D3D4D3 ;
				display: flex;/*弹性布局*/
				flex-direction: column;/*纵向布局*/
				justify-content: center;/**主轴对齐方式*/
				align-items: center;/*交叉轴对齐方式*/
				
			}
			.login-container{
				width:800px;
				height: 500px;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #F2F2F2;
				border-radius: 5px;
				box-shadow: 0px 0px 5px 5px #5A6268;
				border: 0px solid red;
			}
			.login-container>.login-title{
				margin-top: 20px;
				margin-bottom: 20px;
				width: 100%;
				font-size: 70px;
				font-weight: bold;
				letter-spacing: 10px;
				text-align: center;
				color: red;
				/**
				 * 参数1：水平距离
				 * 参数2：垂直距离
				 * 参数3：阴影距离
				 * 参数4：阴影颜色
				 * */
				text-shadow: 8px 5px 5px  #8D8D8D;
				
			}
			.login-input{
				position: relative;
				width: 400px;
				border: 0px solid red;
				height: 30px;
				margin:20px 10px;
				
			}
			.login-input>label{
				box-sizing: border-box;
				position: absolute;
				width: 75px;
				height: 50px;
				line-height: 60px;
				padding-left: 10px;
				font-size: 18px;
				color: #666666;
				letter-spacing: 3px;
			}
			.login-input>input{
				box-sizing: border-box;
				padding-left: 75px;
				border-radius: 5px;
				border:0px;
				outline: none;
				border:1px solid #DDDDDD;
				font-size: 18px;
				width: 400px;
				height: 60px;
			}
			.login-button{
				position: relative;
				width: 400px;
				border: 0px solid red;
				height: 30px;
				margin:25px 10px;
				
				
			}
			.login-button>button{
				width: 400px;
				height: 60px;
				font-size: 20px;
				letter-spacing: 10px;
				outline: none;
				border: 0px;
				border:1px solid  #DDDDDD;
				border-radius: 5px;
				background-color: #FFFFFF;
				color:  #666666;;
			}
			.login-button>button:hover{
				width: 400px;
				height: 60px;
				font-size: 20px;
				letter-spacing: 10px;
				
				border: 0px;
				border:1px solid  #DDDDDD;
				border-radius: 5px;
				background-color:#1E9FFF;
				color:  #FFFFFF;
				cursor: pointer;
			}
			.login-button>button:active{
				border: 0px;
				box-shadow: 0px 0px 5px 3px #007BFF;
			}
		</style>
	</head>
	<body>
		<div class="main-container">
			<div class="login-container">
				<div class="login-title">
					加中实训办公系统
				</div>
				<div class="login-input">
					<label>账户：</label>
					<input type="text" />
				</div>
				<div class="login-input">
					<label>密码：</label>
					<input type="password" />
				</div>
				<div class="login-button">
					<button>登录</button>
				</div>
				
			</div>
		</div>
	</body>
</html>
